<template>
  <div class="mydiscount">
    <van-tabs v-model="active" @click="changetype" color="#187a72" title-active-color="#187a72" title-inactive-color="black">
      <van-tab title="待领取"></van-tab>
      <van-tab title="已领取"></van-tab>
      <van-tab title="已使用"></van-tab>
      <van-tab title="已失效"></van-tab>
    </van-tabs>
    <p class="discount_tip">{{text}}优惠券 (共{{num}}张)</p>
    <DiscountList :discountlist="discountlist" :type="type" v-on:parentget="showparentget" v-if="haveorno==1"></DiscountList>
    <Nothing v-if="haveorno==0">
      <template #texttip>你还没有任何优惠券哦</template>
      <template #imgtip><img src="./../../assets/img/noanydiscount.png" alt=""></template>
    </Nothing>
  </div>
</template>

<script>
import Vue from 'vue'
import DiscountList from './components/DiscountList'
import Nothing from './components/Nothing'
import { Tab, Tabs } from 'vant'
import * as fetch from '@/api/fetch'

Vue.use(Tab).use(Tabs)

export default {
  name: 'MyDiscount',
  data () {
    return {
      haveorno: 1,
      type: '0',
      active: 0,
      num: '',
      text: '待领取',
      discountlist:[]
    }
  },
  methods: {
    changetype (index, title) {
      this.type = index
      if (index == 0) {
        this.text = '待领取'
      }
      if (index == 1) {
        this.text = '已领取'
      }
      if (index == 2) {
        this.text = '已使用'
      }
      if (index == 3) {
        this.text = '已失效'
      }
      this.getCouponList()
    },

    showparentget(e){
      console.log(e)
      this.getCoupon(e)
      this.getCouponList()
    },
    async getCouponList () {
      const res = await fetch.getCouponList({
        page: 1,
        type: this.type + 1
      })
      console.log(res)
      this.num = res.data.length
      if (res.data == null) {
        this.haveorno = 0
      } else {
        this.haveorno = 1
        this.discountlist = res.data
      }
    },

    async getCoupon (c_id) {
      const res = await fetch.getCoupon({
        c_id:c_id
    })
    console.log(res)
  }

  },
  components: {
    DiscountList,
    Nothing
  },
  mounted () {
    this.getCouponList()
  }
}
</script>

<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
.mydiscount{
  .h100();
  .discount_tip{
    margin-top: 20px;
    margin-left: 25px;
    font-size: 15px;
    color: #9f9f9f;
  }
}
</style>
